<template>
  <div class="add box">
    <div>
      <p>
        <i class="icon-bitian iconfont"></i>系统名称
        <el-input
          v-model="form.name"
          placeholder="请输入系统名称"
          size="normal"
          maxlength="30"
        ></el-input>
      </p>
      <p>
        <i class="icon-bitian iconfont"></i>所属租户
        <el-select
          v-model="form.tenantId"
          placeholder="请选择系统所属租户"
          size="normal"
        >
          <el-option
            v-for="item in tenantList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </p>
      <p>
        <i class="icon-bitian iconfont"></i>存储配置
        <el-select
          v-model="form.storageId"
          placeholder="请选择系统存储配置"
          size="normal"
        >
          <el-option
            v-for="item in storageList"
            :key="item.id"
            :label="item.storageName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </p>
      <p>
        &#12288;&#12288;&#12288;备注
        <el-input
          size="normal"
          type="textarea"
          maxlength="100"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入备注内容"
          v-model="form.remarks"
          resize="none"
        >
        </el-input>
      </p>
      <p>
        <el-button type="primary" round size="normal" @click="addSystem()"
          >确认</el-button
        >
        <el-button
          round
          size="normal"
          @click="() => {$router.push('/configManage/systemSetting')}"
          >取消</el-button
        >
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "systemAdd",
  components: {},
  data() {
    return {
      form: {
        name: "",
        tenantId: "",
        storageId: "",
        remarks: "",
      },
      tenantList: [],
      storageList: [],
    };
  },
  created(){
    this.getStorageSelect()
    this.getTenantSelect()
  },
  methods: {
    // 校验事件
    verify() {
      if (this.form.name === "") {
        this.$message.error("请填写系统名称！");
        return false;
      } else if (this.form.tenantId === "") {
        this.$message.error("请选择系统所属租户！");
        return false;
      } else if (this.form.storageId === "") {
        this.$message.error("请选择存储配置名称！");
        return false;
      } else {
        return true;
      }
    },
    // 新增
    addSystem() {
      if (this.verify()) {
        this.$Http.newSystemList(this.form).then((res) => {
          if (res.code !== "SUCCESS") {
            return this.$message({
              type: "warning",
              message: res.message +"!",
            });
          } else {
            this.$router.push("/configManage/systemSetting");
            return this.$message({
              type: "success",
              message: "系统新增成功！",
            });
          }
        });
      }
    },
    // 获取租户下拉菜单
    getTenantSelect() {
      this.$Http.tenentNameList({}).then((res) => {
        this.tenantList = res.data;
      });
    },
    // 获取存储配置下拉菜单
    getStorageSelect() {
      this.$Http.storageNameList({}).then((res) => {
        this.storageList = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "src/assets/css/content.scss";
</style>
